<template>
  <el-dialog :title="title+'管理员'"
             :visible.sync="isShow"
             width="45%"
             @close="cancel">
    <el-form ref="formRef" :rules="formRules" :model="formData" class="info-form"  label-width="110px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="管理员账号"
                        prop='login_name'>
            <el-input size="medium" v-model="formData.login_name"
                      placeholder="请输入用户名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管理员姓名"
                        prop='name'>
            <el-input size="medium" v-model="formData.name"
                      placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管理员邮箱"
                        prop="email">
            <el-input size="medium" v-model="formData.email"
                      placeholder="请输入邮箱"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管理员手机"
                        prop="phone">
            <el-input size="medium" v-model="formData.phone"
                      placeholder="请输入手机"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管理员密码"
                        v-if="isAdd"
                        prop='password'>
            <el-input size="medium" v-model="formData.password"
                      :min="6"
                      :max="15"
                      placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="管理员密码"
                        v-else>
            <el-input size="medium" v-model="formData.password"
                      min="6"
                      max="15"
                      placeholder="留空表示不修改"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账号状态">
            <el-switch v-model="formData.status"
                       active-text="启用"
                       inactive-text="禁用"
                       :active-value="1"
                       :inactive-value="2"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="角色"
                        prop="role_id">
            <el-checkbox-group v-model="formData.role_id">
              <el-checkbox v-for="item in rolelist"
                           :key="item.id"
                           :label="item.id">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button size="medium" @click="cancel">取 消</el-button>
      <el-button size="medium" type="primary"
                 @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { addData, updateData, getInfoData } from '@/api/system/user'
import { mapGetters, mapActions } from 'vuex'
const defaultItem = {
  login_name: '',
  name: '',
  password: '',
  email: '',
  phone: '',
  role_id: [],
  status: 1 // 状态，1是正常，2是禁用
}
// 验证函数
const checkLength = (rule, value, callback) => {
  if (!value.length) {
    callback(new Error('请选择角色'))
  } else if (value.length > 3) {
    callback(new Error('角色不能超过3个'))
  } else {
    callback()
  }
}
// 验证规则
const formRules = {
  login_name: [
    { required: true, message: '管理员账号必须！', trigger: 'blur' },
    { min: 1, max: 20, message: '20个字符以内', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '姓名必须', trigger: 'blur' },
    { min: 1, max: 10, message: '20个字符以内', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '管理员密码必须！', trigger: 'blur' },
    { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,15}$/, message: '密码必须包含字母和数字', trigger: 'blur' },
    { min: 6, max: 15, message: '6-15个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '管理员邮箱必须！', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不正确！', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '手机号必须！', trigger: 'blur' },
    { pattern: /^1[3|4|5|6|7|8|9]\d{9}/, message: '手机格式不正确！', trigger: 'blur' }
  ],
  role_id: [{ required: true, validator: checkLength, trigger: 'change' }]
}
export default {
  name: 'vInfo',
  data () {
    return {
      isShow: false,
      isAdd: true,
      formData: { ...defaultItem },
      formRules
    }
  },
  created () {
    !this.rolelist.length && this.getAllRoleList()
  },
  computed: {
    ...mapGetters('role', ['rolelist']),
    title () {
      return this.isAdd ? '添加' : '修改'
    }
  },
  methods: {
    ...mapActions('role', ['getAllRoleList']),
    // 获取单个信息
    async getInfo (id) {
      const res = await getInfoData(id)
      this.formData = { ...res }
      this.isAdd = false
      this.isShow = true
    },
    // 提交数据(增加/修改)
    async submit () {
      // 校验
      try {
        await this.$refs.formRef.validate()
      } catch (error) {
        return this.$message.warning(this.$t('base.verificationText'))
      }
      // 判断行为提交
      if (this.isAdd) {
        await addData(this.formData)
        this.$message.success(this.$t('base.addSuccessText'))
      } else {
        await updateData(this.formData)
        this.$message.success(this.$t('base.editSuccessText'))
      }
      // 更新、关闭、重置表单
      this.isAdd = true
      this.$emit('update-list')
      this.cancel()
    },
    // 重置操作
    cancel () {
      this.isAdd = true
      this.isShow = false
      this.formData = { ...defaultItem }
      this.$refs.formRef.clearValidate()
    }
  }
}
</script>
<style scoped>
</style>
